import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane, } from 'taro-ui'
import { DNavBar, DFinancingInfo, DItemError, DModal } from '@/components'
import './financingorder.scss'
import http from '@/api'

export default class FinancingorderBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            active: 0,
            page: 1,
            limit: 10,
            totalCount: 1,
            statusText: 0,
            isShow: false,
            value: '',
            item: '',
            scrollHeight: window.screen.availHeight,
            list: [],
            listStatus: false
        }
    }

    componentWillMount() {
        let { active = 0 } = this.$router.params
        this.handleClick(+active)
    }

    componentDidShow() {
        let { listStatus } = this.state
        if (listStatus) {
            return
        }
        this.setState({
            list: [],
            page: 1,
            limit: 10,
            totalCount: 1,
            listStatus: true
        }, () => {
            this.getOrderList()
        })
    }

    handleClick(active) {
        this.setState({
            listStatus: true,
            active,
            list: [],
            page: 1,
            limit: 10,
            totalCount: 1
        }, () => {
            this.getOrderList()
        })
    }

    firstClickMoney() {
        let { isOpened } = this.state
        isOpened = !isOpened
        this.setState({
            isOpened
        })
    }

    onCancelHandle = () => {
        this.setState({
            isOpened: false
        })
    }

    onSubmitHandle = () => {
        let { value } = this.state
        if (!value) {
            return Taro.showToast({
                icon: 'none',
                title: '请输入修改后报价价格！'
            })
        }
    }

    onFormClick() {
        Taro.navigateTo({
            url: '/pages/carform/carform'
        })
    }

    handleChange(value) {
        this.setState({
            value
        })
    }

    onHandleForm() {
        Taro.navigateTo({
            url: '/pages/carform/carform'
        })
    }

    getOrderList() {
        let { active, page, limit, totalCount } = this.state
        let _obj = {
            limit,
            page,
            classStatus: 1 + active
        }
        if (page > totalCount) {
            return
        }
        let _list = []
        http.getOrderListData(_obj).then(data => {
            if (data.list.length > 0) {
                data.list.map(item => {
                    _list.push({
                        order: item.orderNo,
                        orstatus: this.getStatus(item.status),
                        status: item.status,
                        date: item.amSpendDate,
                        days: item.amSpendPeriod,
                        way: item.amMonitorType,
                        number: `${item.amTotalCarCount}`,
                        address: item.amMonitorAddr,
                        money: item.amFinnanceMoney + '万元',
                        id: item.id
                    })

                })
            }
            this.setState({
                list: [...this.state.list, ..._list],
                listStatus: false
            })
        })


    }

    onScrollEnd = () => {
        this.setState({
            page: this.state.page + 1
        }, () => this.getOrderList())

    }

    getStatus(status) {
        return {
            $0: '待资方审核',
            $1: '待资方上传',
            $2: '待确认',
            $3: '车辆运输中',
            $4: '待资方上传',
            $5: '待确认',
            $6: '交易成功',
            $7: '审核未通过',
            $8: '已撤回',
            $9: '交易异常'
        }[`$${status}`]
    }

    getStatusText(status) {
        return {
            $0: '撤回审核',
            $2: '确认验车',
            $5: '确认合同',
            $8: '重新提交'
        }[`$${status}`]
    }

    onHanldeFirst(item) {
        // console.log(item)
        if (item.status === '0') {
            this.setState({
                isShow: true,
                item
            })
        }
        else if (item.status === '2') {
            Taro.navigateTo({
                url: `/pages/inspectionphotos/inspectionphotos?id=${item.id}&active=1&status=1`
            })
        }
        else if (item.status === '5') {
            Taro.navigateTo({
                url: `/pages/inspectionphotos/inspectionphotos?id=${item.id}&active=2&status=1`
            })
        }
        else if (item.status === '8') {
            Taro.navigateTo({
                url: `/pages/financingapplication/financingapplication?id=${item.id}`
            })
        }
        else {
            this.onDetailHandle(item)
        }
    }
    //撤回库融订单
    getCancelInfo(id) {
        http.getCancelInfo({ id: id }).then(res => {
            Taro.navigateTo({
                url: `/pages/itemdetail/financedetail?id=${id}&status=8`
            })
        })
    }
    onClose() {
        this.setState({
            isShow: false
        })
    }
    onLastHandle() {
        let { item } = this.state
        this.onClose()
        this.getCancelInfo(item.id)
    }
    onDetailHandle(item) {
        Taro.navigateTo({
            url: `/pages/itemdetail/financedetail?status=${item.status}&id=${item.id}`
        })
    }

    render() {
        const {
            active,
            isShow,
            list,
            scrollHeight,
            statusText
        } = this.state
        const tabList = [{ title: '待审核' }, { title: '待验车' }, { title: '待确认' }, { title: '已完结' }]

        return (
            <View className='b_financingorder'>
                <DNavBar title={'库融订单'}></DNavBar>
                <View className='b_financingorder__box'>
                    <View className='b_financingorder__content'>
                        <AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
                            {
                                tabList.map(tap => <AtTabsPane>
                                    <ScrollView
                                        scrollY
                                        scrollWithAnimation
                                        lowerThreshold='20'
                                        style={`height:${scrollHeight - 100}PX`}
                                        onScrollToLower={this.onScrollEnd}
                                    >
                                        {
                                            list.length > 0 && <View className='b_financingorder__content_item'>
                                                {
                                                    list && list.map(item => {
                                                        return <DFinancingInfo
                                                            onDetailHandle={this.onDetailHandle.bind(this, item)}
                                                            {...item}
                                                            firstText={this.getStatusText(item.status) || '查看订单'}
                                                            onHanldeFirst={this.onHanldeFirst.bind(this, item)}
                                                        ></DFinancingInfo>
                                                    })
                                                }
                                            </View>
                                        }
                                    </ScrollView>
                                </AtTabsPane>
                                )
                            }
                        </AtTabs>
                    </View>
                </View>
                {
                    list.length === 0 && <DItemError></DItemError>
                }
                <DModal
                    isShow={isShow}
                    title='提示'
                    text='确认撤回订单吗？'
                    firstbtn='取消'
                    lastbtn='确认'
                    onFirst={this.onClose.bind(this)}
                    onCancel={this.onClose.bind(this)}
                    onLast={this.onLastHandle.bind(this)}
                ></DModal>
            </View>
        )
    }
}